// 调控记录
import React,{useState} from "react";
import { useTranslation } from "react-i18next";
import { Table, Modal, Pagination } from "antd";

export const ControlRecords = React.forwardRef(({ visible , handleCloseControlRecords}, ref) => {
  const { t } = useTranslation();
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );
  const columns = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.dateAndTime"),
      dataIndex: "b",
      key: "b",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulatoryContent"),
      dataIndex: "c",
      key: "c",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.exponentialConstant"),
      dataIndex: "d",
      key: "d",
      align: "right",
      width: 192,
      render: (text, record) => (
        <div className={record.f == 0 ? "yellow-text" : null}>{text}</div>
      ),
    },
    {
      title: t("dappIndexRegulation.regulatoryContent"),
      dataIndex: "e",
      key: "e",
      align: "center",
      render: (text, record) => (
        <span>{t('dappIndexRegulation.weight')}</span>
      )
    },
    {
      title: t("dappIndexRegulation.executionStatus"),
      dataIndex: "f",
      key: "f",
      align: "center",
      render: (text, record) => (
        <div className={record.f == 0 ? "yellow-text" : "green-text"}>
          {record.f == 0 ?  t('dappIndexRegulation.regulating'): t('dappIndexRegulation.successful')}
        </div>
      ),
    },
  ];
  const dataSource = [
    {
      a: "1",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 0,
    },
    {
      a: "2",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
    {
      a: "3",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
    {
      a: "4",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
    {
      a: "5",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
    {
      a: "6",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 0,
    },
    {
      a: "7",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
    {
      a: "8",
      b: "2021-09-12 12:00:00",
      c: "BTC,ETH,BSC",
      d: "110,000,000.00000000",
      e: "权重",
      f: 1,
    },
  ];
  return (
    <Modal
      width={800}
      footer={null}
      open={visible}
      title={t("dappIndexRegulation.records")}
      className="index-regulation-modal index-regulation-control-records-modal"
      onCancel={handleCloseControlRecords}
      style={{ top: 84 }}
    >
      <div className="table-box">
        <Table
          size="small"
          boedered={false}
          columns={columns}
          dataSource={dataSource}
          pagination={false}
          scroll={deviceType == 'Mobile' ? {x: 'max-content'}:null}
        ></Table>
        <div className="pagination-box">
          <div className="total-text">20</div>
          <Pagination total={50} size="small" />;
        </div>
      </div>
    </Modal>
  );
});
